<template>
  <div class="update">
    <div class="update_box"
         :style="{borderRadius:`${radius}px`,width:`${size}px`,height:`${size}px`,backgroundImage:`url(${backgroundUrl})`}"
         @click="clickUpdate">
      <div class="update_mask" :style="{background:`rgba(0,0,0,${maskOpacity})`,height: `${maskHeight}%`}"></div>
      <div v-show="imgUrl==''">
        <div class="tips_top">点击</div>
        <div class="tips_bottom">上传照片</div>
      </div>
      <img v-show="imgUrl" class="update_image" :src="imgUrl">
    </div>

    <!--  菜单  -->
    <div class="menu_box" v-show="showMask">
      <div class="menu_mask" @click="closeMenu"></div>
      <div class="img_box" v-if="seeImg" @click="closeMenu(2)">
        <img class="child_img" v-show="imgLoadingOk" :src="imgUrl" @load="imgLoad">
        <div v-if="!imgLoadingOk" class="mask_loading">
          <div class="mask_loading_drop"></div>
          <div class="mask_loading_drop"></div>
          <div class="mask_loading_drop"></div>
          <div class="drop_container"></div>
          <span class="drop_step">{{ loadStep }}%</span>
        </div>
      </div>
      <!--      -->
      <div class="menu_list"
           :style="{transform: `translateY(${translateY}%)`,transition:`all ${animationTime}ms ease`}">
        <div class="menu_item input_box">
          重新上传
          <input ref="input" class="update_input" accept='image/*' type="file" @change="fileChange"></div>
        <div class="menu_item" @click="showBigImg">预览</div>
        <div class="menu_line"></div>
        <div class="menu_item" @click="closeMenu">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "updateHeadImg",
  props: {
    maskOpacity: {
      type: Number,
      default: 0.5
    },
    radius: {
      type: Number,
      default: 10
    },
    size: {
      type: Number,
      default: 100
    },
    imgType: {
      type: String,
      default: "png|jpg|jpeg"
    }
  },
  data() {
    return {
      imgLoadingOk: false,
      showMask: false,
      translateY: 100,
      maskHeight: 0,
      animationTime: 300,//菜单收回动画时间
      loadStep: 0,
      imgUrl: '',
      backgroundUrl: 'https://boringcdn.nanningboring.com/20210310/noavatar.png',
      seeImg: false
    }
  },
  methods: {
    clickUpdate() {
      if (this.imgUrl == '' && this.maskHeight <= 0) {
        this.$refs.input.click();
        return;
      }
      if (this.maskHeight <= 0) {
        this.openMenu();
      }
    },
    fileChange(e) {
      let dom = e.target || e.srcElement;
      if (dom.files.length == 0) return;
      this.closeMenu();
      let file = dom.files[0];
      let nameArr = file.name.split('.');
      let fileType = nameArr[nameArr.length - 1];
      if (this.imgType.indexOf(fileType) < 0) {
        dom.value = '';
        // image type error,you can do something...
        return;
      }
      const THAT = this;
      THAT.maskHeight = 100;
      let timer = setInterval(() => {
        if (THAT.maskHeight <= 0) {
          clearInterval(timer);
        }
        if (THAT.maskHeight <= 20) return;
        let num = THAT.maskHeight - Math.random() * 5;
        THAT.maskHeight = num <= 20 ? 20 : num;
      }, 100);

      // do something...
      let timer1 = setTimeout(() => {
        this.maskHeight = 0;
        this.imgUrl = 'https://boringcdn.nanningboring.com/bzg/fdsactangle69.png';
        clearTimeout(timer1)
      }, 3000)
    },
    // 查看大图
    showBigImg() {
      this.closeMenu(1);
      this.imgLoadingOk = false;
      this.loadStep = 0;
      this.seeImg = true;
      let timer = setInterval(() => {
        if (this.loadStep >= 100) {
          this.imgLoadingOk = true;
          clearInterval(timer);
        }
        let num = this.loadStep + Math.random() * 5;
        this.loadStep = num >= 100 ? 99 : parseInt(num);
      }, 50);
    },
    imgLoad() {
      this.loadStep = 100;
    },
    openMenu() {
      this.showMask = true;
      let timer = setTimeout(() => {
        this.translateY = 0;
        clearTimeout(timer);
      }, 50)
    },
    closeMenu(isShowBig = 0) {
      this.translateY = 100;
      if (isShowBig == 1) {
        return;
      }
      if (isShowBig == 2) {
        this.seeImg = false;
        this.showMask = false;
        return;
      }
      let timer = setTimeout(() => {
        this.showMask = false;
        clearTimeout(timer);
      }, this.animationTime);
    }
  },
  watch: {
    showMask(nowValue) {
      this.$emit("showChange", nowValue)
    }
  }
}
</script>

<style lang="css" scoped>
.update {
  width: inherit;
  height: inherit;
  display: flex;
  z-index: 9999 !important;
}

.update_box {
  border-radius: inherit; /* 继承圆角 */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.update_input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: 99;
}

.update_image {
  width: 100%;
  height: auto;
}

.update_mask {
  width: 100%;
  transition: height .3s ease;
  position: absolute;
  left: 0;
  bottom: 0;
}

/*  */
.menu_box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 999999;
}

.menu_mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .5);
}

.menu_list {
  z-index: 9999 !important;
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.menu_item {
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #eeeeee;
}

.menu_item:active {
  background: #cccccc;
}

.input_box {
  position: relative;
  overflow: hidden;
}

.menu_item:first-child {
  border-top: none;
}

.menu_line {
  height: 10px;
  background: #EEEEEE;
}

/*   */
.img_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.child_img {
  max-width: 100%;
  height: auto;
}

.mask_loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  filter: contrast(10);
}

.mask_loading_drop {
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  filter: blur(10px);
  opacity: 0;
  animation: 2.5s drop linear infinite;
}

.mask_loading_drop:nth-child(2) {
  transform: translateY(-50px);
  animation-delay: .5s;
}

.mask_loading_drop:nth-child(3) {
  transform: translateY(-80px);
  animation-delay: .7s;
}

.drop_container {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 50%;
  filter: blur(10px);
  animation: 2.5s drop_container linear infinite;
}

.drop_step {
  font-size: 14px;
  position: absolute;
  font-family: Helvetica;
}

@keyframes drop {
  0% {
    transform: scale(0.7) translateY(-600%);
    opacity: 0;
  }
  50% {
    transform: scale(0.4) translateY(-80%);
    opacity: 1;
  }
  100% {
    transform: scale(0.3) translateY(0px);
  }
}

@keyframes drop_container {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    width: 30px;
    border-radius: 20% 35% 30% 25%;
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

/*    */
.tips_top {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.tips_bottom {
  font-size: 12px;
  text-align: center;
}
</style>